<template>
  <el-dialog
    :title="dialog.title"
    :visible.sync="dialog.show"
    width="700px"
    custom-class="mydialog"
    append-to-body
    @close="handleClose"
  >
    <div class="dialog-content">
      <p class="d-title pb-20">申请采购汇总数据如下：</p>
      <el-form ref="form1" :model="form" :rules="rules" label-width="150px">
        <el-table
          :data="tableData"
          :summary-method="computeNum"
          border
          show-summary
          style="width: 100%"
          class="dialog-table">
          <el-table-column
            prop="skuName"
            label="SKU名称"
            width="120"/>
          <el-table-column
            prop="amount"
            label="采购总数"/>
          <el-table-column prop="price" label="采购单价" width="230">
            <template slot-scope="scope">
              <el-input v-model=" scope.row.price" @input="changeNum(scope.row)"/>
            </template>
          </el-table-column>
          <el-table-column prop="amount5" label="采购总金额" >
            <template slot-scope="scope">
              ￥{{ scope.row.price * scope.row.amount }}
            </template>
          </el-table-column>
        </el-table>
        <el-form-item label="备注">
          <el-input v-model="form.number" placeholder="驳回必填"/>
        </el-form-item>
      </el-form>
      <div class="text-center mt-30">
        <el-button class="greenbt" type="primary" @click="submitBut()">提交</el-button>
        <el-button class="greenbt" type="info" @click="rejectBut()">驳回</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { approvalPurchase } from '@/api/pas/purchase'
export default{
  props: {
    modalStaticData: {
      type: Object,
      default: () => {}
    },
    // 父组件调用时传进来的参数
    modalData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialog: {
        title: '',
        show: true
      },
      form: {
        type_options: [],
        type: '',
        number: ''
      },
      rules: {},
      tableData: [],
      search: {
        purchaseDetail: '',
        rejectRemark: '',
        approvalType: '',
        operationType: ''
      }
    }
  },
  mounted() {
    // 基本信息
    // this.dialog.title = '待提交';
    this.tableData = this.modalData
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    changeNum(item) {
      item.amount5 = Number(item.price * item.amount)
    },
    // 提交
    submitBut() {
      var list = []
      for (var i = 0; i < this.tableData.length; i++) {
        if (isNaN(this.tableData[i].price)) {
          this.$message('单价必须是数字！')
          return
        }
        var cs = {
          'purchaseItemId': this.tableData[i].purchaseItemId,
          'purchaseId': this.tableData[i].purchaseId,
          'skuId': this.tableData[i].skuId,
          'warehouseId': this.tableData[i].warehouseId,
          'shipmentId': this.tableData[i].shipmentId,
          'mallOrderNumber': this.tableData[i].mallOrderNumber,
          'amount': this.tableData[i].amount,
          'collectAmount': this.tableData[i].collectAmount,
          'serialNumber': this.tableData[i].serialNumber,
          'price': this.tableData[i].price,
          'status': this.tableData[i].status,
          'createby': this.tableData[i].createby,
          'createTime': this.tableData[i].createTime,
          'deleteFlag': this.tableData[i].deleteFlag
        }
        list.push(cs)
      }

      // this.search.purchaseDetail = JSON.stringify(this.tableData)
      this.search.purchaseDetail = JSON.stringify(list)
      this.search.rejectRemark = this.form.number
      this.search.approvalType = 1
      this.search.operationType = 2
      approvalPurchase(this.search)
        .then(response => {
          if (response.data.status === 'success') {
            this.$message({
              message: '提交成功!',
              type: 'success'
            })
            this.handleClose()
          }
        }).finally(() => {
          this.modalStaticData.closeChildAndRefresh()
        })
    },
    // 驳回
    rejectBut() {
      if (this.form.number === null || this.form.number === '') {
        this.$message('驳回备注不能为空！')
        return
      }
      var bhlist = []
      for (var i = 0; i < this.tableData.length; i++) {
        var bh = {
          'purchaseItemId': this.tableData[i].purchaseItemId,
          'purchaseId': this.tableData[i].purchaseId,
          'skuId': this.tableData[i].skuId,
          'warehouseId': this.tableData[i].warehouseId,
          'shipmentId': this.tableData[i].shipmentId,
          'mallOrderNumber': this.tableData[i].mallOrderNumber,
          'amount': this.tableData[i].amount,
          'collectAmount': this.tableData[i].collectAmount,
          'serialNumber': this.tableData[i].serialNumber,
          'price': this.tableData[i].price,
          'status': this.tableData[i].status,
          'createby': this.tableData[i].createby,
          'createTime': this.tableData[i].createTime,
          'deleteFlag': this.tableData[i].deleteFlag
        }
        bhlist.push(bh)
      }
      this.search.purchaseDetail = JSON.stringify(bhlist)
      this.search.rejectRemark = this.form.number
      this.search.operationType = 1
      approvalPurchase(this.search)
        .then(response => {
          if (response.data.status === 'success') {
            this.$message({
              message: '驳回成功!',
              type: 'success'
            })
            this.handleClose()
          }
        }).finally(() => {
          this.modalStaticData.closeChildAndRefresh()
        })
    },

    computeNum(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item =>
          column.property === 'amount5' ? Number(item['amount']) * Number(item['price']) : Number(item[column.property])
        )
        // 验证每个value值是否是数字，如果是执行if
        if (index === 2) {
          //
        } else {
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              return prev + curr
            }, 0)
            if (index === 3) {
              sums[index] = '￥' + sums[index]
            }
          } else {
            sums[index] = 'NAN'
          }
        }
      })
      return sums
    }

  }
}
</script>

<style>
.mydialog .dialog-table .el-input__inner, .mydialog .dialog-table .el-input {
    width: 108px;
    text-align: center;
}
</style>
